<template>
	<main-content
		v-if="!dialog.visible"
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:rules="rules"
				:model="queryData"
				label-width="100px"
			>
				<el-form-item :label="`${$t('common.belong_merchant')}:`">
					<merchant-select
						v-model="queryData.merchantId"
						v-symbols
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('system.versionnumberlist.version')}:`"
				>
					<el-input
						v-model.trim="queryData.version"
						clearable
						v-input="{ name: 'noEmpty' }"
						:maxlength="8"
						size="medium"
						style="width: 260px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('system.versionnumberlist.status')}:`"
				>
					<el-select
						v-model="queryData.status"
						style="width: 240px"
						collapse-tags
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in appVersionStatus"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('system.versionnumberlist.device')}:`"
				>
					<el-select
						v-model="queryData.clientType"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in appVersionClientType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item :label="`${$t('common.createBy')}:`">
						<el-input
							v-model="queryData.createdBy"
							v-symbols
							clearable
							:maxlength="20"
							size="medium"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item> -->
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('903021')"
						type="warning"
						icon="el-icon-folder"
						:disabled="loading"
						size="medium"
						@click="openCreateOrEdit($t('common.add'))"
					>
						{{ $t('common.add') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:max-height="tableHeight"
				:data="list"
				highlight-current-row
				:header-cell-style="getRowClass"
				@sort-change="changeTableSort"
			>
				<el-table-column
					prop="merchantName"
					align="center"
					:label="$t('common.belong_merchant')"
					width="200px"
				>
					<template slot-scope="scope">
						{{ scope.row.merchantName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('system.versionnumberlist.version')"
					prop="id"
					width="200px"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.version || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="status"
					align="center"
					:label="$t('system.versionnumberlist.status')"
					width="100px"
				>
					<template slot-scope="scope">
						<span v-if="scope.row.status === 0" class="disableRgba">
							{{
								typeFilter(scope.row.status, 'appVersionStatus')
							}}
						</span>
						<span v-else class="normalRgba">
							{{
								typeFilter(scope.row.status, 'appVersionStatus')
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('system.versionnumberlist.type')"
					prop="updateType"
					width="200px"
				>
					<template slot-scope="scope">
						{{
							typeFilter(
								scope.row.updateType,
								'appVersionUpdateType'
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="clientType"
					align="center"
					width="180px"
					:label="$t('system.versionnumberlist.device')"
				>
					<template slot-scope="scope">
						{{
							typeFilter(
								scope.row.clientType,
								'appVersionClientType'
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					prop="title"
					:label="$t('system.versionnumberlist.info')"
					width="180px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.title || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					prop="content"
					:label="$t('system.versionnumberlist.content')"
					width="130px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.content || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="createdBy"
					align="center"
					:label="$t('common.createBy')"
					width="110"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdBy || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					:label="$t('common.createAt')"
					width="160"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdAt || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedBy"
					align="center"
					:label="$t('common.last_updateBy')"
					width="110"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.updatedBy || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedAt"
					align="center"
					:label="$t('common.last_updateAt')"
					width="160"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.updatedAt || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="operating"
					align="center"
					:label="$t('common.actions')"
					width="240"
				>
					<template slot-scope="scope">
						<el-button
							v-if="
								hasPermission('903022') &&
									scope.row.status + '' !== '1'
							"
							:disabled="loading"
							type="success"
							size="medium"
							class="noicon"
							@click="changeStatus(scope.row)"
						>
							{{ $t('common.turn_on') }}
						</el-button>
						<el-button
							v-if="
								hasPermission('903022') &&
									scope.row.status + '' === '1'
							"
							:disabled="loading"
							type="danger"
							size="medium"
							class="noicon"
							@click="changeStatus(scope.row)"
						>
							{{ $t('common.disabled') }}
						</el-button>

						<el-button
							v-if="hasPermission('903023')"
							type="primary"
							icon="el-icon-edit"
							size="medium"
							:disabled="scope.row.status === 1"
							@click="
								openCreateOrEdit($t('common.edit'), scope.row)
							"
						>
							{{ $t('system.versionnumberlist.edit') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
	</main-content>
	<div v-else class="game-container report-container editPicturePage">
		<div class="editPicturePage-content">
			<div class="form-header">
				<span>
					{{
						dialog.type === $t('common.add')
							? $t('system.versionnumberlist.create_version')
							: $t('system.versionnumberlist.edit_version')
					}}
				</span>
				<span>
					<el-button type="info" @click="handleCancle">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button
						:disabled="dialog.loading"
						:loaidng="dialog.loading"
						type="success"
						@click="hnadleCreateOrEdit"
					>
						{{ $t('common.save') }}
					</el-button>
				</span>
			</div>
			<div class="content-part2">
				<el-form
					ref="formSub"
					:model="dialog.form"
					label-width="120px"
					:rules="rules"
				>
					<div style="margin-bottom: 60px">
						<p class="name">
							{{ $t('system.versionnumberlist.detail') }}
						</p>

						<el-form-item
							:label="
								`${$t('system.versionnumberlist.version')}:`
							"
							class="tagheight"
							prop="version"
						>
							<el-input
								v-input="{ name: 'noEmpty' }"
								v-model.trim="dialog.form.version"
								:placeholder="$t('common.please_enter')"
								maxlength="8"
								clearable
								style="width: 365px"
							></el-input>
						</el-form-item>
						<el-form-item
							:label="`${$t('common.choose_merchant')}:`"
							prop="merchantId"
						>
							<merchant-select
								v-model="dialog.form.merchantId"
								v-symbols
								:placeholder="$t('common.please_choose')"
								:disabled="dialog.type === $t('common.edit')"
								style="width: 365px"
							></merchant-select>
						</el-form-item>
						<el-form-item
							:label="`${$t('system.versionnumberlist.device')}:`"
							class="tagheight"
							prop="clientType"
						>
							<el-select
								v-model="dialog.form.clientType"
								:placeholder="$t('common.please_choose')"
								:popper-append-to-body="false"
								style="width: 365px"
							>
								<el-option
									v-for="item in appVersionClientType"
									:key="item.code"
									:label="item.description"
									:value="item.code"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item
							:label="
								`${$t('system.versionnumberlist.download')}:`
							"
							class="tagheight"
							prop="downloadUrl"
						>
							<el-input
								v-model.trim="dialog.form.downloadUrl"
								:placeholder="$t('common.please_enter')"
								maxlength="1024"
								clearable
								style="width: 365px"
							></el-input>
						</el-form-item>
					</div>

					<div>
						<p class="name">
							{{ $t('system.versionnumberlist.config') }}
						</p>

						<el-form-item
							:label="`${$t('system.versionnumberlist.method')}:`"
							prop="updateType"
						>
							<el-radio-group v-model="dialog.form.updateType">
								<el-radio :label="2">
									{{ $t('system.versionnumberlist.strong') }}
								</el-radio>
								<el-radio :label="1">
									{{ $t('system.versionnumberlist.weak') }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item
							:label="`${$t('system.versionnumberlist.info')}:`"
							class="tagheight"
							prop="title"
						>
							<el-input
								v-model="dialog.form.title"
								v-symbols
								:placeholder="$t('common.please_enter')"
								maxlength="64"
								clearable
								style="width: 365px"
							></el-input>
						</el-form-item>
						<el-form-item
							:label="
								`${$t('system.versionnumberlist.content')}:`
							"
							prop="content"
						>
							<el-input
								v-model.trim="dialog.form.content"
								type="textarea"
								:maxlength="500"
								show-word-limit
								clearable
								style="width: 365px"
								:placeholder="$t('common.please_enter')"
								@input="handleInput"
							></el-input>
						</el-form-item>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { NO_SPECIAL_CHAR } from '@/utils/pattern'
import MainContent from '@/components/MainContent/index.vue'

export default {
	// eslint-disable-next-line vue/name-property-casing
	name: 'versionnumberlist',
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {},
			dialog: {
				visible: false,
				type: '',
				loading: false,
				form: {
					updateType: 2,
					version: '',
					subType: 0,
					clientType: '',
					downloadUrl: null,
					merchantId: '',
					title: '',
					content: ''
				}
			},
			// errTime: false,
			addOrEdit: 'add'
		}
	},
	computed: {
		appVersionStatus() {
			return this.globalDics.appVersionStatus || []
		},
		appVersionClientType() {
			return this.globalDics.appVersionClientType || []
		},
		appVersionUpdateType() {
			return this.globalDics.appVersionUpdateType || []
		},
		showMerchantSelect() {
			return !(this.isZk && this.dialog.type === this.$t('common.edit'))
		},
		isZk() {
			return this.$store.getters.isZk
		},
		rules() {
			const versioncheck = (rule, value, callback) => {
				var arr = /^[0-9]+([.]{1}[0-9]+)([.]{1}[0-9]+){0,1}$/
				if (!arr.test(value)) {
					callback(this.$t('system.versionnumberlist.only_number'))
				} else {
					callback()
				}
			}
			const version = [
				{
					required: true,
					validator: versioncheck,
					trigger: 'blur'
				},
				{
					min: 1,
					max: 8,
					message: this.$t('system.versionnumberlist.limit8'),
					trigger: 'blur'
				}
			]
			const updateType = [
				{
					required: true,
					message: this.$t('common.please_enter'),
					trigger: 'blur'
				}
			]
			const merchantId = [
				{
					required: true,
					message: this.$t('common.components.select_merchant'),
					trigger: 'change'
				}
			]
			const clientType = [
				{
					required: true,
					message: this.$t(
						'system.versionnumberlist.please_select_device'
					),
					trigger: 'change'
				}
			]
			const content = [
				{
					required: true,
					message: this.$t(
						'system.versionnumberlist.content_no_empty'
					),
					trigger: 'blur'
				}
			]
			const title = [
				{
					required: true,
					message: this.$t(
						'system.versionnumberlist.please_input_info'
					),
					trigger: 'blur'
				}
			]
			const downloadUrl = [
				{
					required: true,
					message: this.$t(
						'system.versionnumberlist.please_input_download'
					),
					trigger: 'blur'
				},
				{
					min: 1,
					max: 1024,
					message: this.$t('system.versionnumberlist.limit1024'),
					trigger: 'blur'
				}
			]

			return {
				version,
				updateType,
				merchantId,
				clientType,
				title,
				content,
				downloadUrl
			}
		}
	},
	created() {},
	methods: {
		handleInput(val) {
			this.dialog.form.content = val.replace(NO_SPECIAL_CHAR, '')
		},
		loadData() {
			const params = {
				...this.getParams(this.queryData)
			}
			this.loading = true
			this.$api
				.getappVersionConfigpageList(params)
				.then((res) => {
					if (res?.code === 200) {
						const { record, totalRecord } = res.data || {}
						this.loading = false
						this.list = Array.isArray(record)
							? Object.freeze(record)
							: []
						this.total = totalRecord || 0
					} else {
						this.loading = false
						this.$message({
							message: res.msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},

		startChange() {
			this.drag = true
		},
		endChange() {
			this.drag = false
		},
		openCreateOrEdit(type, row) {
			if (row) {
				row.clientType += ''
				this.dialog.form = { ...row }
			}
			this.dialog.type = type
			this.dialog.visible = true
		},
		hnadleCreateOrEdit() {
			this.$refs.formSub.validate(async (valid) => {
				if (valid) {
					this.dialog.loading = true
					const api =
						this.dialog.type === this.$t('common.add')
							? 'createAppVersionConfig'
							: 'updateAppVersionConfig'

					try {
						await this.$api[api]({ ...this.dialog.form })
						this.$message({
							message: `${this.dialog.type}${this.$t(
								'common.success'
							)}!`,
							type: 'success'
						})
						this.dialog.loading = false
						this.handleCancle()
						this.loadData()
					} catch (error) {
						this.dialog.loading = false
					}
				}
			})
		},
		handleCancle() {
			this.dialog.visible = false
			this.dialog.form = {
				updateType: 2,
				version: '',
				subType: 0,
				clientType: '1',
				downloadUrl: null,
				title: '',
				content: ''
			}
		},

		changeStatus(val) {
			this.$confirm(
				`<strong>${this.$t('system.versionnumberlist.is_config')}${
					val.status === 0
						? this.$t('common.turn_on')
						: this.$t('common.disabled')
				}${this.$t(
					'common.actions'
				)}?</strong></br><span style='font-size:12px;color:#D9001B'>${this.$t(
					'system.versionnumberlist.is_effect'
				)}</span>`,
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning',
					customClass: 'positionIcon'
				}
			)
				.then(() => {
					this.$api
						.updateVersionConfigStatus({
							id: val.id,
							status: val.status === 0 ? 1 : 0
						})
						.then(() => {
							this.$message({
								message: this.$t('common.modify_success'),
								type: 'success'
							})
							this.loadData()
						})
				})
				.catch(() => {})
		},
		reset() {
			this.queryData = {}
			this.pageNum = 1
			this.loadData()
		},
		changeTableSort({ column, prop, order }) {
			if (prop === 'createdAt') {
				prop = 1
			}
			if (prop === 'updatedAt') {
				prop = 2
			}
			this.pageNum = 1
			this.queryData.orderKey = prop
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderKey
				delete this.queryData.orderType
			}
			this.loadData()
		},
		enterSearch() {
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .tagheight {
	.el-form-item__content,
	.el-select {
		width: 480px;
	}
}
.editPicturePage {
	background-color: #f5f5f5;
	margin: 0;
	padding: 15px 0 20px;
	.editPicturePage-content {
		width: 1100px;
		margin: 0 auto;
		background-color: #fff;
		position: relative;
		.form-header {
			height: 55px;
			line-height: 55px;
			width: 100%;
			background-color: rgba(0, 0, 0, 1);
			span:nth-child(1) {
				position: absolute;
				left: 30px;
				top: 0;
				color: rgba(255, 255, 255, 0.847058823529412);
				font-size: 16px;
				font-weight: 700;
			}
			span:nth-child(2) {
				position: absolute;
				right: 30px;
				top: 0;
				color: #999;
				font-weight: 400;
				font-size: 14px;
			}
		}
		.form-header:after {
			content: '.';
			height: 0;
			display: table;
			clear: both;
		}
		.content-part2 {
			width: 100%;
			padding: 25px 30px 20px;
			background-color: #fff;
			position: relative;
			margin: 0 auto;
			::v-deep .agent-form {
				padding: 20px;
				max-height: 600px;
				overflow: auto;
				box-shadow: rgba(88, 88, 88, 0.35) 0px 0px 5px;
				.remakeBox {
					width: 264px;
					position: absolute;
					left: 200px;
					bottom: 0;
					line-height: 20px;
				}
			}
		}
	}
}
.name {
	margin-bottom: 20px;
	font-weight: 600;
}
</style>
